<template>
  <div class="app-container">
    <!-- 题库管理-基础题库 -->
    <div class="top">
      <span>说明：目前支持学科和关键字条件筛选</span>
      <el-button type="success" icon="el-icon-edit">新增试题</el-button>
    </div>
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="学科">
        <!-- change	选中值发生变化时触发	目前的选中值 -->
        <el-select v-model="form.subjectID" placeholder="请选择" @change="subChange">
          <el-option
            v-for="item in subOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级目录">
        <el-select v-model="form.catalogID" placeholder="请选择">
          <el-option
            v-for="item in cataOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标签">
        <el-select v-model="form.tags" placeholder="请选择">
          <el-option
            v-for="item in tagsOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关键字">
          <el-input v-model="form.keyword"></el-input>
      </el-form-item>
      <el-form-item label="试题类型">
        <el-select v-model="form.questionType" placeholder="请选择">
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="难度">
        <el-select v-model="form.difficulty" placeholder="请选择">
          <el-option
            v-for="item in difficultyOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="方向">
        <el-select v-model="form.direction" placeholder="请选择">
          <el-option
            v-for="item in directionOptions"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="录入人">
        <el-select v-model="form.creatorID" placeholder="请选择">
          <el-option
            v-for="item in cataOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="题目备注">
        <el-input v-model="form.remarks"></el-input>
      </el-form-item>
      <el-form-item label="企业简称">
        <el-input v-model="form.shortName"></el-input>
      </el-form-item>
      <el-form-item label="城市">
        <el-select v-model="form.province " placeholder="请选择" @change="provinceChange">
          <el-option
            v-for="item in provinceOptions"
            :key="item.city"
            :label="item.city"
            :value="item.city">
          </el-option>
        </el-select>
        <el-select v-model="form.city" placeholder="请选择">
          <el-option
            v-for="item in cityOptions"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="clear">清除</el-button>
        <el-button type="primary" @click="search">搜索</el-button>
      </el-form-item>
    </el-form>
    <!-- 提示 -->
    <el-alert
      :title="`数据一共${total}条`"
      type="info"
      :closable="false"
      show-icon>
    </el-alert>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="number" label="试题编号" width="130"></el-table-column>
      <el-table-column prop="subject" label="学科" width="100"></el-table-column>
      <el-table-column prop="catalog" label="目录" width="150"></el-table-column>
      <el-table-column prop="questionType" label="题型" width="100">
        <template #default="{row}"> 
          <div v-if="row.questionType === '1'">单选</div>
          <div v-else-if="row.questionType === '2'">多选</div>
          <div v-else-if="row.questionType === '3'">简答</div>
        </template>
      </el-table-column>
      <el-table-column prop="question" label="题干" width="180"></el-table-column>
      <el-table-column prop="addDate" label="录入时间" width="180">
        <template #default="{row}">
          {{getTime(row.addDate)}}
        </template>
      </el-table-column>
      <el-table-column prop="difficulty" label="难度" width="100">
        <template #default="{row}"> 
          <div v-if="row.difficulty === '1'">简单</div>
          <div v-else-if="row.difficulty === '2'">一般</div>
          <div v-else-if="row.difficulty === '3'">困难</div>
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="录入人" width="180"></el-table-column>
      <el-table-column label="操作">
        <template #default="{row}">
          <el-button icon="el-icon-view" type="info" circle @click="preview(row.id)"></el-button>
          <el-button type="primary" icon="el-icon-edit" circle @click="edit"></el-button>
          <el-button type="danger"  icon="el-icon-delete" circle></el-button>
          <el-button type="success" icon="el-icon-check" circle></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <div class="bottom">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-sizes="[5,10, 15, 20]"
        :page-size="form.pagesize"
        layout="prev, pager, next, sizes, jumper"
        :total="total">
      </el-pagination>
    </div>
    <view-dialog :dialog-visible="visible" @close-Dialog ="dialogClose"></view-dialog>
    <view-dialog ref="viewDialog" :dialog-visible="visible" @close-Dialog ="dialogClose" @open-dialog="preview(id)"></view-dialog>
  </div>
</template>

<script>
import {difficulty, questionType, direction} from '@/api/constants'
import {questionsList} from '@/api/questions'
import {simpleSubject} from '@/api/subjects'
import {simpleDirectory} from '@/api/directorys'
import {tagsSimple} from '@/api/tags'
import {parseTime} from '@/utils/index'
import {datas} from '@/utils/city'
import ViewDialog from '@/views/questions/list/components/view-dialog.vue'
export default {
  name: 'List',
  components: {
    ViewDialog
  },
  data() {
    return {
      form: {
        page: 1,
        pagesize: 10
      },
      subOptions: [],//学科
      cataOptions: [],//二级目录
      tagsOptions: [],//标签
      difficultyOptions: [],//难度
      typeOptions: [],//题目类型
      directionOptions: [],//方向
      provinceOptions: [],//省
      cityOptions: [],//城市
      tableData: [],
      total: 0,
      visible: false,
    }
  },
  mounted() {
    this.getTableList()
    this.getOptins()
    this.getSubList()
    this.getCity()
  },
  methods: {
    // 预览
    preview(id) {
      // 打开弹窗
      this.visible = true
      // 调子组件的方法  数据回显
      this.$refs.viewDialog.viewDetail(id)
    },
    clear() {
      this.form = {
        page: 1,
        pagesize: 10
      }
      this.getTableList()
    },
    search() {
      this.getTableList(this.form)
    },
    // 获取题库
    async getTableList() {
      const res = await questionsList(this.form)
      // console.log(res);
      this.tableData = res.items
      this.total = res.counts
    },
    // 获取学科列表
    async getSubList() {
      const res = await simpleSubject()
      this.subOptions = res
    },
    async subChange(num) {
      // console.log(num);
      // 对应二级目录简单列表
      const res = await simpleDirectory(num)
      // console.log(res);
      this.cataOptions = res
      // 对应的标签列表
      const tagRes = await tagsSimple(num)
      // console.log('标签', tagRes)
      this.tagsOptions = tagRes
    },
    // 难度 类型 方向
    getOptins() {
      this.difficultyOptions = difficulty
      this.typeOptions = questionType
      this.directionOptions = direction
    },
    // 格式化时间
    getTime(time) {
      return parseTime(time)
    },
    getCity() {
      this.provinceOptions = datas
    },
    // 城市联动
    provinceChange(e) {
      // console.log(e);
      const c = this.provinceOptions.filter(item => {
        if(item.city === e){
          // console.log(item);
          return item
        }
      })
      // console.log(c);
      this.cityOptions = c[0].area
    },
    // 分页
    handleSizeChange(size) {
      this.form.pagesize = size
      this.getTableList()
    },
    handleCurrentChange(page) {
      this.form.page = page
      this.getTableList()
    },
    dialogClose() {
      this.visible = false
    },
    dialogOpen() {
      this.visible = true
    },
    //编辑？？？？？？？？？
    edit() {
      // 跳转到试题录入界面
      this.$router.push('/questions/new')
      // 数据回流

    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #fff;
  margin: 20px;
  .top {
    display: flex;
    justify-content: space-between;
    span {
      font-size: 12px;
      color: #ffc5da;
    }
  }
}
</style>